<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">	
	div{
			width: 1200px;
			height: 500px;
			background-color: pink;
			margin: 0 auto;
			display: flex;
			/*wrap 换行*/
			/*flex-wrap: wrap;*/
			/*wrap-reverse 倒序换行*/
			/*flex-wrap: wrap-reverse;*/
			/*space-aroud 垂直方向的剩余空间包围着子元素*/
			/*flex-wrap: wrap;
			align-content: space-around;*/

	

	}

	/*order 是设置元素排序的优先--》order默认是从小到大排序*/
	span {
			width: 200px;
			height: 100px;
			background-color: skyblue;
			border: 1px solid #fff;
		}

		span:nth-child(4) {
			width: 300px;
			height: 100px;
			background-color: yellow;
			order: -1;
		}
		span:nth-child(5) {
			width: 300px;
			height: 100px;
			background-color: red;
			order: -2;
		}
		span:nth-child(6) {
			width: 300px;
			height: 100px;
			background-color: red;
			order: 1;
		}
</style>
</head>
<body>
     <div>
     	 <span>a</span>
     	 <span>b</span>
     	 <span>c</span>
     	 <span>d</span>
     	 <span>e</span>
     	 <span>f</span>
     	 <span>g</span>
     </div>
</body>
</html>